<script setup>
import {ref, reactive, onMounted, watch} from 'vue'
import axios from "axios";

//筛选表单
const orderType = ref("外卖")
const filterForm = reactive({
  orderNumber: '',
  storeName: '', // 绑定到下拉框的选中值
  orderStatus: '', // 绑定到下拉框的选中值
  orderType: orderType.value,
  orderTime: '',
  endTime: ''
});
const exportToExcel = (tableData) => {
  // 导出Excel
  document.location.href = "http://localhost:8080/indent/download";
};
//分页信息
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 100
})
//表格数据
const tableData = ref([])
//综合查询方法
//搜索
const handleQuery = () => {
  // 重置分页信息
  pagination.pageNum = 1;
  pagination.pageSize = 10;
  // 调用 fetchData 方法获取数据
  fetchDataWithFilter();
};
const fetchDataWithFilter = () => {
  // 构造筛选条件
  const { orderNumber, storeName, orderType, orderStatus,orderTime, endTime } = filterForm;
  const params = {
    orderNumber,
    storeName,
    orderType,
    orderTime,
    endTime,
    orderStatus,
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize,

  };
  // 调用后端接口
  axios.post(`/indent/select/${pagination.pageNum}/${pagination.pageSize}`, params).then((res) => {
    tableData.value = res.data.data;
    pagination.total = res.data.total;
  });
};
// 分页大小改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
}
// 当前页改变
const handleCurrentChange = (val) => {
  pagination.pageNum = val
}
// 下拉框数据
const OrderStatus111 = ref([]);
const StoreName111 = ref([]);
//获取数据
const fetchData = () => {
  axios.get(`/indent/allReceipt/${orderType.value}/${pagination.pageNum}/${pagination.pageSize}`).then((res) => {
        tableData.value = res.data.data;
        pagination.total= res.data.total;
      }
  )};
// 获取下拉框数据
const feData1 = () => {
  axios.get("/indent/allOrderStatus").then((res) => {
    OrderStatus111.value = res.data; // 假设后端返回的是数组格式
  });
};
const feData2 = () => {
  axios.get("/indent/allStoreName").then((res) => {
    StoreName111.value = res.data; // 假设后端返回的是数组格式
  });
};
onMounted(() => {
  fetchData()
  feData1()
  feData2()
})
// 弹窗数据
const dialogVisible = ref(false);
const orderDetails = ref({
  receipt: [],
  dishes: []
});
// 显示弹窗
const showDialog = (index, row) => {
  axios.get(`/indent/${row.id}`).then((res) => {
    orderDetails.value = res.data;
  })
  dialogVisible.value = true;
}
watch(
    () => [pagination.pageNum, pagination.pageSize],
    ([newPageNum, newPageSize]) => {
      // 在这里调用 fetchData 方法
      fetchData();
    }
);
</script>

<template>
  <div class="dine-in-order-container">
    <!-- 顶部标题 -->
    <div class="header">
      <h1>外卖订单</h1>
    </div>
    <!-- 筛选区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="订单编号">
          <el-input v-model="filterForm.orderNumber" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="请选择门店">
          <el-select v-model="filterForm.storeName" placeholder="请选择">
            <el-option
                v-for="status in StoreName111"
                :key="status"
                :label="status"
                :value="status">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择订单状态">
          <el-select v-model="filterForm.orderStatus"  placeholder="请选择">
            <el-option
                v-for="status in OrderStatus111"
                :key="status"
                :label="status"
                :value="status">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
              v-model="filterForm.orderTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
          <el-date-picker
              v-model="filterForm.endTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button type="primary" @click="fetchData">刷新</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据表格 -->
    <div class="table-container">
      <el-button type="text" size="small" @click="exportToExcel">导出</el-button>
      <el-table :data="tableData"  style="width: 100%">
        <el-table-column prop="id" label="订单id" width="180"/>
        <el-table-column prop="orderNumber" label="订单编号" width="180" />
        <el-table-column prop="orderTime" label="下单时间" width="180" />
        <el-table-column prop="totalAmount" label="订单金额" width="120" />
        <el-table-column prop="storeName" label="所属门店" width="150" />
        <el-table-column prop="takeoutUsername" label="外卖用户名" width="120" />
        <el-table-column prop="takeoutPhone" label="外卖手机号" width="120" />
        <el-table-column prop="deliveryAddress" label="外卖收货地址" width="120" />
        <el-table-column prop="orderStatus" label="订单状态" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="text" size="small" @click="showDialog(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
          :page-sizes="[1, 3, 5,10,15,20,50]"
          :total="pagination.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total,sizes, prev, pager, next"
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize">
      </el-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog  v-model="dialogVisible" title="订单详情">
      <div>
        <h3>用户信息</h3>
        <p>用户名: {{ orderDetails.receipt.takeoutUsername }}</p>
        <p>手机号: {{ orderDetails.receipt.takeoutPhone }}</p>
        <p>收货地址: {{ orderDetails.receipt.deliveryAddress }}</p>

        <h3>菜品信息</h3>
        <el-table :data="orderDetails.dishes">
          <el-table-column prop="id" label="编号" width="50" />
          <el-table-column prop="name" label="菜品名称" />
          <el-table-column prop="price" label="原价" />
          <el-table-column prop="currentPrice" label="现价" />
          <el-table-column prop="discount" label="折扣" />
          <el-table-column prop="note" label="备注" />
        </el-table>

        <h3>费用明细</h3>
        <p>餐盒费: ¥{{ orderDetails.receipt.packingFee }}</p>
        <p>配送费: ¥{{ orderDetails.receipt.deliveryFee }}</p>
        <p>实际支付金额: ¥{{ orderDetails.receipt.actualAmount }}</p>

        <h3>订单信息</h3>
        <p>订单编号: {{ orderDetails.receipt.orderNumber }}</p>
        <p>订单状态: {{ orderDetails.receipt.orderStatus }}</p>
        <p>订单金额: ¥{{ orderDetails.receipt.orderAmount }}</p>
        <p>下单时间: {{ orderDetails.receipt.orderTime }}</p>
        <p>支付方式: {{ orderDetails.receipt.paymentMethod }}</p>
        <p>支付时间: {{ orderDetails.receipt.paymentTime }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>

.dine-in-order-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 20px;
}

.header h1 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>